<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC DOH Test</title>
		<style>
			@import "../../../../dojo/resources/dojo.css";
		</style>
		<!-- required: dojo.js -->
		<script src="../../../../dojo/dojo.js" type="text/javascript" data-dojo-config="isDebug: 1, parseOnLoad: 0, async: 1, mvc: {debugBindings: true, extensionPerWidget: true}"></script>
		<script type="text/javascript" src="./helpers.js"></script>
		<script type="text/javascript">
			require([
				"doh/runner",
				"dojo/dom",
				"dojo/Stateful",
				"dijit/_WidgetBase",
				"dijit/form/TextBox",
				"dojox/mvc/at",
				"dojox/mvc/atBindingExtension"
			], function(doh, dom, Stateful, _WidgetBase, TextBox, at, atBindingExtension){
				doh.register("doh_mvc_extension-per-widget", [
					function widgetNotExtended(){
						var model = new Stateful({value: "Foo"}),
						 w = new TextBox({value: at(model, "value")}, dom.byId("tb0"));
						w.startup();
						doh.f(w.value == "Foo", "Widget should not have been looked at at()");
					},
					function extendInstance(){
						var model = new Stateful({value: "Foo"}),
						 w = atBindingExtension(new TextBox({}, dom.byId("tb1")))[0];
						w.startup();
						w.set("value", at(model, "value"));
						doh.is("Foo", w.value, "Extended widget should have been initialized with the model value");
						model.set("value", "Bar");
						doh.is("Bar", w.value, "Extended widget should have been updated with the model value");
						w = new TextBox({value: at(model, "value")}, dom.byId("tb2"));
						w.startup();
						doh.f(w.value == "Bar", "Non-extended widget should not have been looked at at()");
					},
					function extendClass(){
						atBindingExtension(TextBox.prototype);
						var model = new Stateful({value: "Foo"}),
						 w = new TextBox({value: at(model, "value")}, dom.byId("tb3"));
						w.startup();
						doh.is("Foo", w.value, "Extended widget should have been looked at at()");
						w = new _WidgetBase({value: at(model, "value")}, dom.byId("w0"));
						w.startup();
						doh.f(w.value == "Foo", "Non-extended widget should not have been looked at at()");
					}
				]);

				doh.run();
			});
		</script>
	</head>
	<body>
		<input id="tb0" type="text">
		<input id="tb1" type="text">
		<input id="tb2" type="text">
		<input id="tb3" type="text">
		<span id="w0"></span>
	</body>
</html>
